<template>
  <div class="box">
    <!-- 1.默认显示心愿卡 -->
    <div class="wishcard">
      <van-icon name="arrow-down" color="#D6D6D6" size=".315rem" @click="wishList()" v-if="flag"/>
      <van-icon name="arrow-up" color="#D6D6D6" size=".315rem" @click="wishList()" v-else/>
      <h1>请选择你感兴趣的项目</h1>
      <div :class="this.flag?'select':'hidden'">
        <ul>
        <li v-for="(item,index) of interested" :key="index" @click="isselect(item)" :class="item.isselect?'b':'a'">
          {{item.keyword}}
        </li>
        <button @click="submit()">确认</button>
        </ul>
      </div>
    </div>
    <!--2.当点击下拉收缩时，出现推荐组件  -->
    <div  v-if="!flag">
      <van-sticky>
      <van-nav-bar
        left-arrow
        @click-left="$router.go(-1)"
      />
    </van-sticky>
    <Recomment></Recomment>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Icon, Toast, NavBar, Sticky } from 'vant'
import Recomment from '@/components/recomment.vue'
Vue.use(Icon)
Vue.use(Toast)
Vue.use(NavBar)
Vue.use(Sticky)
export default {
  data () {
    return {
      flag: true, // 选择区显隐
      show: [], // 显示已选择关键词
      interested: [
        { keyword: '吸脂瘦大腿' },
        { keyword: '大眼睛' },
        { keyword: '皮肤美白' },
        { keyword: '祛斑' },
        { keyword: '祛痘' },
        { keyword: '小翘鼻' },
        { keyword: '年轻化' },
        { keyword: '激光脱毛' },
        { keyword: '牙齿矫正' },
        { keyword: '丰胸' },
        { keyword: '半永久纹眉' },
        { keyword: '去黑头' },
        { keyword: '水光针' },
        { keyword: '面部填充' },
        { keyword: '牙齿美白' },
        { keyword: '瘦脸针' }
      ]
    }
  },
  components: {
    Recomment
  },
  mounted () {
    // 添加一个新字段，判断关键字是否已经选择，默认未选择
    this.interested.forEach(item => {
      this.$set(item, 'isselect', false)
    })
  },
  methods: {
    submit () {
      this.show = []
      this.interested.map(item => {
        if (item.isselect === true) {
          this.show.push({
            wish: item.keyword
          })
        }
      })
      // console.log(this.show)
      if (this.show.length !== 0) {
        // Toast({
        //   message: '选择成功，即将跳转首页' + this.show + ''
        // })
        // setTimeout(this.fa, 3000)
        localStorage.setItem('wish', JSON.stringify(this.show))
        const toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '选择成功，即将跳转首页        ' + '倒计时 3 秒'
        })
        let second = 3
        const timer = setInterval(() => {
          second--
          if (second) {
            toast.message = `选择成功，即将跳转首页        倒计时 ${second} 秒`
          } else {
            clearInterval(timer)
            // 手动清除 Toast
            Toast.clear()
            this.$router.push('/home')
          }
        }, 1000)
      } else {
        Toast('请选择心愿单')
      }
    },
    // 心愿单上拉下拉事件
    wishList () {
      this.flag = !this.flag
    },
    // 关键词选择事件
    isselect (item) {
      item.isselect = !item.isselect
      // console.log(item.isselect)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.van-nav-bar {
  height: .46rem;
  line-height: .46rem;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #464646;
}
.wishcard {
  width: 3.75rem;
  // height: 3.95rem;
  position:fixed;
  bottom: 0;
  // height: 100%;
  border-radius: .265rem .25rem .05rem .05rem;
  box-shadow: 0 -.04rem .05rem #f8f8f8;
  z-index: 1002;
  background-color: #fff;
  /deep/.van-icon {
    position: absolute;
    top:.1rem;
    margin:0 1.72rem;
  }
  h1 {
    margin: .45rem 1.15rem .33rem;
    font-weight: normal;
    color: #999;
    font-size: .14rem;
  }
  .hidden {
    display: none;
  }
  .select {
    margin: 0 .3rem 0;
    li {
      width: auto;
      padding: .06rem .075rem;
      font-size: .13rem;
      // color: #333;
      border-radius: .05rem;
      display: flex;
      justify-content: space-around;
      float: left;
      // background: #fff8f8;
      margin-left: .13rem;
      margin-bottom: .2rem;
    }
    button {
      width: 2.1rem;
      height: .35rem;
      line-height: .35rem;
      background: linear-gradient(#ff91cf, #fe7299);
      border-radius: .175rem;
      border: none;
      margin:.26rem .525rem .745rem;
      color: #fff;
      font-size: .17rem;
    }
  }
}
/* 未选择样式 */
.a {
  background-color: #fff8f8;
  color: #333;
}
/* 已选择样式 */
.b {
  background-color: #ff78a3;
  color: #fff;
}
</style>
